import React from 'react';
import { Card, Tag, Space, Typography, Divider } from 'antd';
import { useAuth } from '../contexts/AuthContext';

const { Title, Text } = Typography;

const PermissionDemo = () => {
    const { user } = useAuth();

    if (!user) return null;

    return (
        <Card
            title="当前用户权限信息"
            style={{ margin: '20px 0' }}
        >
            <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                <div>
                    <Text strong>用户名：</Text>
                    <Text>{user.username}</Text>
                </div>

                <div>
                    <Text strong>邮箱：</Text>
                    <Text>{user.email}</Text>
                </div>

                <div>
                    <Text strong>管理员身份：</Text>
                    <Tag color={user.isAdmin ? 'green' : 'orange'}>
                        {user.isAdmin ? '是' : '否'}
                    </Tag>
                </div>

                <Divider />

                <div>
                    <Text strong>用户角色：</Text>
                    <br />
                    <Space wrap>
                        {user.roles && user.roles.map(role => (
                            <Tag key={role} color="blue">{role}</Tag>
                        ))}
                    </Space>
                </div>

                <div>
                    <Text strong>权限列表：</Text>
                    <br />
                    <Space wrap>
                        {user.permissions && user.permissions.map(permission => (
                            <Tag key={permission} color="purple">{permission}</Tag>
                        ))}
                    </Space>
                </div>

                <Divider />

                <div>
                    <Text type="secondary" style={{ fontSize: '12px' }}>
                        💡 提示：
                        <br />
                        • 管理员 (sjly) 可以访问所有页面
                        <br />
                        • 普通用户 (demo) 只能访问基础功能，无法访问设备管理和演示功能
                        <br />
                        • 尝试切换不同用户体验权限控制
                    </Text>
                </div>
            </Space>
        </Card>
    );
};

export default PermissionDemo;
